<template>
	<view class="withdrawal">
		<view class="content">
			<view class="uni-title uni-common-mt">提现至</view>
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in data.items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="item.value == data.current" />
						</view>
						<view>{{item.name}}</view>

					</label>
				</radio-group>
				<!-- 银行卡 -->
				<view class="backList" v-if="data.current==2" @click="binding">
					<view v-if="data.form.bankId==''" class="backNamesm">
						<text >{{data.cardStr}}</text>
					</view>
					<view v-else class="backNames">
						<image class="backImg" src="https://pubuimg.cqguanjie.cn/chat/16950024915493"></image>
						<text class="backId">{{data.form.bankId}}</text>
					</view>
					<image class="selects" src="https://pubuimg.cqguanjie.cn/chat/16950033913179"></image>
				</view>
			</view>
		</view>
		<!-- 提现积分 -->
		<view class="withMoney">
			<view class="moneyList">
				<text class="text">提现积分</text>
				<view class="withAll">
					<view class="allMonye">
						<text class="symbol">￥</text>
						<input class="money" v-model="data.form.money" placeholder="请输入您要提现的积分"  />
					</view>
					<text class="allList" @click="data.form.money=$toFiexd(data.userInfo.money,2)">全部提现</text>
				</view>
				<text class="numberMonye">可提现积分 ￥{{$toFiexd(data.userInfo.money,2)}}</text>
				<view class="inputText" v-if="data.current==1">
					<view class="inputName">
						<text>姓名</text>
						<input v-model="data.form.name" placeholder="请输入用户名" />
					</view>
					<view  class="inputName">
						<text>账号</text>
						<input v-model="data.form.account" placeholder="请输入账号" />
					</view>
				</view>
				<view style="margin: 20px 0;" v-html="data.cashSet.notes">

				</view>

				<view class="bottomTm">
					<view class="bottomWith" @click="subimit()">
						<text>确认提现</text>
					</view>
					<text class="prompt">温馨提示：提现申请发起后，预计在24小时内到账</text>
				</view>
			</view>
		<view style="text-align: center;"  @click="$goURl('/pages/business/cash/cash')">
			提现记录
		</view>
		</view>

		<!-- 银行卡列表 -->
		<uni-popup ref="share"  class="sharep" style="border-top-left-radius: 20px;border-top-right-radius: 20px;">
			<view class="popupcontent">
				<view class="selectBank">
					<text class="selectMdd">选择银行卡</text>
					<uni-icons type="closeempty" size="20" class="popupIcon" @click="closem"></uni-icons>
				</view>
				<view class="information">
					<view class="BankList" v-for="(lin,index) in data.list" :key="index" @click="selectBank(lin)">
						<view class="nameAndBankName">
							<text class="name">{{lin.name}}</text>
							<text>{{lin.bank_name}}</text>
						</view>
						<view class="bankAddress">
							<text class="address">{{lin.bank_address}}</text>
							<text>{{lin.bank_id}}</text>
						</view>
					</view>
				</view>
				<view class="btn" @click="$goURl('/pages/business/bank/bank')">
					添加银行卡
				</view>
			</view>
		</uni-popup>
		<rudon-payWithPassword :displayByParent="pluginShowing" :pwdLength="6" :amount="data.form.money" titleWindow="请输入支付密码"
			titleAmount="支付购买商品" desc=" " descColor="#FB7B00" :needLog="true" :plaintext="false"
			@whenFullfilled="whenPwdReady">
		</rudon-payWithPassword>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
import userinfoVue from "../personal/set/userinfo.vue";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		cashSet:{},
		items: [{
				value: '2',
				name: '银行卡',
				checked: 'true'
			},
			// {
			// 	value: '1',
			// 	name: '支付宝'
			// }
		],
		current: 2,
		cardStr: "请点击选择银行卡",
		list:[],	//银行卡列表
		form:{
			bankName:'',
			bankId:'',
			money:'',
			password:'',
			bank:'',
			name:'',
			account:'',
		},
		userInfo:{}
	})
	let pluginShowing =ref(false)
	let totalprice =ref(0)
	onLoad((option)=>{
		getcash()
	})
	onShow(()=>{
		getbank()
		data.userInfo=uni.getStorageSync('businessDetail')
	})
	// 点击提现
	function subimit(){
		if(data.form.money<=0){
			uni.showToast({
				icon:'none',
				title:'请输入正确的提现积分'
			})
			return
		}
		if(data.userInfo.is_pay_password==0){
			uni.showModal({
				title: '您还没有设置支付密码',
					content: '去设置支付密码?',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							proxy.$goURl('/pages/personal/password/password?code=1')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
			})
			return
		}
		pluginShowing.value = true
		setTimeout(()=>{
			pluginShowing.value = false
		}, 200)
	}
	// 输入的密码
	function whenPwdReady(e){
		data.form.password = e
		if(data.current==2){
			bank()
		}else if(data.current==1){
			zhifubao()
		}
	}
	// 提现到银行卡
	function bank(){
		if(data.form.bankId==''){
			uni.showToast({
				icon:'none',
				title:'请选择银行卡'
			})
			return
		}
		if(data.form.password.length==6){
			proxy.$SHOPrequest({
				url: `business/cash/`,
				method: 'POST',
				data:{
					money:Number(data.form.money),
					pay_type:Number(data.current),
					password:data.form.password,
					bank:data.form.bank,
					name:data.form.name,
					account:data.form.account
				},
				success(res) {
					if(res.errno==0){
						uni.showToast({
							icon:'none',
							title:res.errmsg
						})
						data.form = {}
						data.form.bankId = ''
					}else{
						uni.showToast({
							icon:'none',
							title:res.errmsg
						})
					}
				}
			})
		}
	}
	// 提现到支付宝
	function zhifubao(){
		if(data.form.password.length==6){
			proxy.$SHOPrequest({
				url: `business/cash/`,
				method: 'POST',
				data:{
					money:Number(data.form.money),
					pay_type:Number(data.current),
					password:data.form.password,
					name:data.form.name,
					account:data.form.account
				},
				success(res) {
					if(res.errno==0){
						uni.showToast({
							icon:'none',
							title:res.errmsg
						})
						data.form = {}
						data.form.bankId = ''
					}else{
						uni.showToast({
							icon:'none',
							title:res.errmsg
						})
					}
					console.log(res);
				}
			})
		}
	}
	// 选取银行卡
	function selectBank(item){
		data.form.bankName = item.bank_name
		data.form.bankId = item.bank_id
		data.form.bank = item.ID
		share.value.close()
		console.log(data.form);
	}
	// 获取银行卡列表
	function getbank(){
		proxy.$SHOPrequest({
			url: `business/bank/?page=1&size=999`,
			method: 'get',
			success(res) {
				data.list=res.data.data
			}
		})
	}
	//获取提现规则
	function getcash(){
		proxy.$SHOPrequest({
			url: `business/cash/`,
			method: 'PUT',
			success(res) {
				if(res.errno!=0){
					uni.showToast({
						icon:"none",
						title:res.errmsg
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}else{
					data.cashSet=res.data
				}

			}
		})
	}
	const share = ref()
	// 打开银行卡列表
	function binding(){
		share.value.open('bottom')
	}
	// 关闭银行卡列表
	function closem(){
		share.value.close()
	}
	// 选择提现方式
	function radioChange(evt) {
		data.current = evt.detail.value
			console.log(evt.detail.value);
	}
</script>

<style scoped lang="scss">
	.withdrawal{
		padding: 30upx;
		.content{
			background-color: #fff;
			border-radius: 30upx;
			.uni-common-mt{
				width: 94%;
				margin: 0 auto;
				border-top: 1px solid #f5f5f5;
				padding: 20px 0;
			}
			.uni-list{
				width: 94%;
				margin: 0 auto;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				.uni-list-cell-pd{
					display: flex;
					margin: 0 0 15px 0;

				}
				.backList{
					display: flex;
					align-items: center;
					.backImg{
						width: 48rpx;
						height: 48rpx;
					}
					.backNames{
						margin-left: 6px;
						display: flex;
						align-items: center;
						.backName,.backId{
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #333333;
							margin: 0 10px;
						}
						.backName{
							margin-left: 10px;
						}
					}
					.backNamesm{
						margin: 0 6px;
						text{
							font-size: 16px;
							color: #333333;
						}
					}
					.selects{
						width: 14px;
						height: 15px;
					}
				}
			}
		}
		.withMoney{
			border-radius: 30upx;
			width: 100%;
			background-color: #fff;
			margin-top: 10px;
			padding: 15px 0;
			.moneyList{
				width: 94%;
				margin: 0 auto;
				.text{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}
				.withAll{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 0 0 20upx 0;
					padding: 10px 0;
					border-bottom: 1px solid #f5f5f5;
					.allMonye{
						display: flex;
						align-items: center;
						.symbol{
							font-size: 36rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #333333;
						}
						.money{
							font-size: 36upx;
							font-family: PingFang SC, PingFang SC-Bold;
							text-align: left;
							color: #333333;
							margin-left: 10px;
						}
					}
					.allList{
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #ff1542;
            white-space: nowrap;
					}
				}
				.numberMonye{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #999999;
				}
				.inputText{
					width: 100%;
					margin-top: 20px;
					.inputName{
						text{
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #333333;
						}
						input{
							height: 72rpx;
							background: #f5f5f5;
							border-radius: 16rpx;
							padding: 0 15px;
							margin: 15px 0;
						}
					}
				}
				.bottomTm{
					margin: 20px 0;
					text-align: center;
					.bottomWith{
						background: #ff1542;
						border-radius: 46rpx;
						padding: 10px 0;
						text-align: center;
						margin-bottom: 10px;
						text{
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #ffffff;
						}
					}
					.prompt{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #999999;
						margin-top: 10px;
					}
				}

			}
		}
		.sharep{
			width: 100%;
			.selectBank{
				width: 94%;
				margin: 0 auto;
				position: relative;
				text-align: center;
				padding: 15px 0;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				.selectMdd{
					color: #333333;
					font-size: 30upx;
					font-weight: 600;
				}
				.popupIcon{
					position: absolute;
					right: 0%;
					top: 10px;
				}
			}
			.information{
				padding: 10px;
				height: 300px;
				background-color: #f5f5f5;
				overflow-y: scroll;
				.BankList{
					background-color: #fff;
					padding: 15px;
					border-radius: 10upx;
					margin-bottom: 30upx;
					.nameAndBankName{
						margin-bottom: 4px;
						color: #333;
						.name{
							margin-right: 10px;
						}
					}
					.bankAddress{
						color: #333;
						.address{
							margin-right: 10px;
						}
					}
				}
			}
		}
	}
	.popupcontent{
		background-color: #f5f5f5;
		border-radius: 30upx 30upx 0 0;
		overflow: hidden;
		.btn{
			background-color: $color1;
			margin: 20upx;
			padding: 20upx;
			text-align: center;
			color: #fff;
			border-radius: 40upx;
		}
	}
</style>
